<script setup lang="ts">
import { nanoid } from 'nanoid'
const props = defineProps({
  id: {
    type: String,
    default: nanoid(),
  },
  url: {
    type: String,
    required: true,
  },
  accessToken: {
    type: String,
    required: true,
  },
  audio: { // 音频
    type: Boolean,
    default: false,
  },
  // 其他配置属性
  options: {
    type: Object,
    default: () => ({}),
  },
})
const { url, accessToken, audio } = toRefs(props)
const videoContainer = ref()
const { width, height } = useElementSize(videoContainer)
const size = computed(() => ({
  width: unref(width) - 10,
  height: unref(height) - 10,
}))
const src = computed(() => {
  return `https://open.ys7.com/ezopen/h5/iframe?url=${url}&autoplay=1&accessToken=${accessToken}&audio=${Number(audio)}`
})
const isMounted = useMounted()
</script>

<template>
  <div ref="videoContainer" class="h-full overflow-hidden flex flex-center">
    <iframe
      v-if="isMounted"
      :id="id"
      :src="src"
      :width="size.width"
      :height="size.height"
      style="border: none"
      allowfullscreen
    />
  </div>
</template>

<style scoped>

</style>
